<template>
  <div class="page">
    <header class="header1">
      <a class="weizhi iconfont" href="#">&#xe627;</a>
      <div class="logo">
        <img :src="require('../../assets/img/pic7.png')" />
      </div>
      <div>
        <input type="text" placeholder="按内容搜索"   @click="tosearch" />
        <span class="ss iconfont icon-sousuo" @click="tosearch" ></span>
      </div>
      <a class="shop iconfont" href="#">&#xe6cb;</a>
    </header>
    <!-- 列表拦 -->
    <nav class="navber">
      <ul class="clearfix">
        <li v-for="(item,index) in list" :key="item.id" @click="tolist(index)">
          <i>{{item.catename}}</i>
        </li>
      </ul>
      <!-- <div class="menu">
        <div class="menubtn">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <h4>分类</h4>
      </div>-->
    </nav>
    <!--轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in lunbo" :key="item.id">
          <img :src="$pre+item.img" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 中间导航 -->
    <div class="iconmen">
      <a href="#">
        <img :src="require('../../assets/img/seckill.png')" alt="pic" />
        <p>限时秒杀</p>
      </a>
      <a href="#">
        <img :src="require('../../assets/img/seckill.png')" alt="pic" />
        <p>畅销商品</p>
      </a>
      <a href="#">
        <img :src="require('../../assets/img/seckill.png')" alt="pic" />
        <p>品牌大卖</p>
      </a>
      <a href="#">
        <img :src="require('../../assets/img/seckill.png')" alt="pic" />
        <p>小u自营</p>
      </a>
      <a href="#">
        <img :src="require('../../assets/img/seckill.png')" alt="pic" />
        <p>积分商城</p>
      </a>
    </div>

    <!-- 限时秒杀 -->
    <article class="container">
      <div class="top clearfix">
        <div class="z fl">
          <div class="wenzi">
            <div class="top clearfix">
              <h2>限时秒杀</h2>
              <a href="#">
                查看更多
                <em class="iconfont">&#xe63c;</em>
              </a>
            </div>
            <p>每天0点场，好货秒不停</p>
            <p class="pp">
              <span>05</span>:
              <span>20</span>:
              <span>48</span>
            </p>
          </div>
        </div>
        <div class="y fr">
          <div class="s">
            <div class="wenzi">
              <h2>品牌上新</h2>
              <p>九点正，抢大牌</p>
              <p class="pp">
                <span>
                  疯抢红包
                  <em class="iconfont">&#xe63c;</em>
                </span>
              </p>
            </div>
          </div>
          <div class="x">
            <div class="wenzi">
              <h2>日用好物</h2>
              <p>愿君多采撷</p>
              <p class="pp">
                <span>
                  塞满奖券
                  <em class="iconfont">&#xe63c;</em>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </article>

    <div class="floot">
      <div class="title">
        <h3
          v-for="(item,index) in  two"
          :key="item"
          :class="{select:s==index}"
          @click="qieh(index)"
        >{{item}}</h3>
        <!-- <h3 class="select">双十一尖货预购</h3>
        <h3>畅购全球</h3>-->
      </div>
      <div class="tu" v-show="s==0">
        <a href="#">
          <img :src="require('../../assets/img/01.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/01.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/01.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/01.png')" />
          <p>热卖爆品</p>
        </a>
      </div>

      <div class="tu" v-show="s==1">
        <a href="#">
          <img :src="require('../../assets/img/02.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/02.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/02.png')" />
          <p>热卖爆品</p>
        </a>
        <a href="#">
          <img :src="require('../../assets/img/02.png')" />
          <p>热卖爆品</p>
        </a>
      </div>
    </div>

    <div class="recommend1">
      <div class="recommend1-topnav">
        <ul>
          <li
            v-for="(item,index) in bar"
            :key="item.id"
            @click="change(index)"
            :class="{active:num===index}"
          >{{item}}</li>
          <!-- <li>上新推荐</li>
          <li>所有商品</li>-->
        </ul>
      </div>

      <div
        class="recommend1-bottom"
        v-show="num===index"
        v-for="(item,index) in xinxi"
        :key="item.id"
      >
        <div
          class="r-Bbox"
          v-for="(items) in item.content"
          :key="items.id"
          @click="todetail(items.id)"
        >
          <img :src="$pre+items.img" />
          <div class="bbox-text">
            <h3>{{items.goodsname}}</h3>
            <span>现价格：{{items.price}} &yen;</span>
            <span>原价格：{{items.market_price}} &yen;</span>
            <button>立即抢购</button>
          </div>
        </div>
      </div>

      <!-- <div class="recommend1-bottom" v-show="num===1" @click="todetail(index)" v-for="(item,index) in xinxi2" :key="item.id*10">
        <div class="r-Bbox">
          <img :src="$pre+item.img" />
          <div class="bbox-text">
            <h3>{{item.goodsname}}</h3>
            <span>现价格：{{item.price}} &yen;</span>
            <span>原价格：{{item.market_price}} &yen;</span>
            <button>立即抢购</button>
          </div>
        </div>
      </div>
      <div class="recommend1-bottom" v-show="num===2" @click="todetail(index)" v-for="(item,index) in xinxi3" :key="item.id*100">
         <div class="r-Bbox">
          <img :src="$pre+item.img" />
          <div class="bbox-text">
            <h3>{{item.goodsname}}</h3>
            <span>现价格：{{item.price}} &yen;</span>
            <span>原价格：{{item.market_price}} &yen;</span>
            <button>立即抢购</button>
          </div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import { reqHomeCate } from "../../http/api";
import { reqlunbo } from "../../http/api";
import { reqmiaosha } from "../../http/api";
import { reqxinxi } from "../../http/api";

export default {
  data() {
    return {
      list: [],
      lunbo: [],
      miaosha: [],
      two: ["双十一尖货预购", "畅购全球"],
      bar: ["热门推荐", "上新推荐", "所有商品"],
      xinxi: [],
      num: 0,
      s: 0,
      keywords: "",
    };
  },
  methods: {
    change(index) {
      //选项卡
      this.num = index;
    },
    qieh(index) {
      this.s = index;
    },
    //跳转搜索
    tosearch() {
      this.$router.push("/search");
    },
    //跳转列表
    tolist(index) {
      this.$router.push("/list?id=" + this.list[index].id);
    },
    //跳转详情
    todetail(id) {
      console.log(this.xinxi);
      this.$router.push("/detail/" + id);
    },
  },
  mounted() {
    //首页顶部列表导航
    reqHomeCate().then((res) => {
      // console.log(res);
      this.list = res.data.list;
      this.list.splice(5);
    });
    //轮播图
    reqlunbo().then((res) => {
      this.lunbo = res.data.list;
      // console.log(this.lunbo);
    });
    //限时秒杀
    // reqmiaosha().then((res) => {
    //   console.log(res);
    // });
    reqxinxi().then((res) => {
      // console.log( res.data.list);
      this.xinxi = res.data.list;
    });
  },
};
</script>

<style scoped>
.page {
 width: 100vw;
  margin: 0 auto;
}
.tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.89rem;
  padding: 0.89rem 0.12rem 0 0.34rem;
  background: #ff6040;
}
.tool .back {
  font-size: 0.35rem;
  color: #ffdfd8;
}
.tool p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 0.4rem "微软雅黑";
  color: #ffdfd8;
}
.jiao {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1.17rem;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.jiao a {
  display: block;
  text-align: center;
}
.jiao a:first-child p {
  color: #ff6040;
}
.jiao a img {
  height: 0.4rem;
  width: auto;
}
.jiao p {
  font: 0.2rem/0.49rem "微软雅黑";
  color: #9b9b9b;
}
.header1 {
  background-image: linear-gradient(180deg, #ff6040, #ff7b68);
}
div {
  position: relative;
}
div input {
  width: 3.36rem;
  height: 0.6rem;
  border: 0.02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
div .ss {
  position: absolute;
  left: 0.14rem;
  top: 0.15rem;
  color: #9a9a9a;
}
.header1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.2rem 0.24rem 0.17rem 0.26rem;
}
.header1 .weizhi {
  display: block;
  font-size: 0.45rem;
  color: white;
}
.header1 .logo {
  display: block;
}
.header1 .logo img {
  width: 1.81rem;
  height: auto;
}
.header1 div {
  position: relative;
}
.header1 div input {
  width: 3.36rem;
  height: 0.6rem;
  border: 0.02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
.header1 div .ss {
  position: absolute;
  left: 0.13rem;
  top: 0.1rem;
  color: #9a9a9a;
  font-size: 0.4rem;
}
.header1 .shop {
  font-size: 0.4rem;
  color: white;
}
.navber {
  display: flex;
  overflow: hidden;
  box-shadow: 0 0.1rem 0.1rem #ffdbd3;
  background-image: linear-gradient(180deg, #ff7b69, #ff897e);
}
.navber > ul {
  flex-grow: 1;
  padding-bottom: 0.04rem;
}
.navber > ul li {
  float: left;
  margin: 0 0.3rem 0 0.19rem;
}
.navber > ul li:nth-last-child {
  margin-right: 0;
}
.navber > ul li i {
  display: block;
  font: 0.27rem "微软雅黑";
  color: #fff;
}
.banner {
  margin: 0 auto;
  margin-top: 0.22rem;
  box-shadow: 0 0.25rem 0.1rem #ffe0da;
}

.banner .my-swipe img {
  width: 100%;
  height: 4rem;
}
.iconmen {
  margin-top: 0.52rem;
  display: flex;
  justify-content: space-around;
}
.iconmen a {
  text-align: center;
}
.iconmen a p {
  font: 0.21rem/0.5rem "微软雅黑";
  color: #6f6f6f;
}
.container {
  margin-top: 0.31rem;
  height: 3.5rem;
  background: #f2f2f2;
  padding: 0.2rem 0 0.2rem 0.2rem;
  margin: 0 auto;
}
.container .top .z {
  width: 3.5rem;
  height: 3.5rem;
  background: url(../../assets/img/big.png) no-repeat 0 0 / cover;
}
.container .top .y {
  width: 3.5rem;
  height: 3.5rem;
}
.container .top .y .s {
  width: 3.3rem;
  height: 1.7rem;
  background: url(../../assets/img/small.png) no-repeat 0 0 / cover;
}
.container .top .y .x {
  width: 3.3rem;
  height: 1.7rem;
  background: url(../../assets/img/piv7.png) no-repeat 0 0 / cover;
  margin-top: 0.1rem;
}
.container .top .z .wenzi .top {
  margin: 0.22rem 0.29rem 0 0.22rem;
}
.container .top .z .wenzi .top h2 {
  font: bold 0.31rem/0.52rem "微软雅黑";
  color: #85a642;
  float: left;
}
.container .top .z .wenzi .top a {
  font: 0.2rem/0.52rem "微软雅黑";
  color: #575754;
  float: right;
}
.container .top .z .wenzi p {
  font: 0.19rem/0.41rem "微软雅黑";
  color: #b2cc7c;
  margin-left: 0.22rem;
}
.container .top .z .wenzi .pp span {
  font: 0.26rem/0.32rem "微软雅黑";
  color: white;
  width: 0.32rem;
  height: 0.36rem;
  background: #8bab4a;
  margin: 0 0.1rem 0 0;
}
.container .top .y .s .wenzi {
  margin-left: 0.2rem;
}
.container .top .y .s h2 {
  font: bold 0.31rem/0.52rem "微软雅黑";
  color: #ff6040;
  padding-top: 0.22rem;
}
.container .top .y .s p {
  font: 0.19rem/0.41rem "微软雅黑";
  color: #ff9a86;
}
.container .top .y .s p em {
  line-height: 0.41rem;
}
.container .top .y .s .pp {
  font: 0.2rem/0.32rem "微软雅黑";
  color: white;
  text-align: center;
}
.container .top .y .s .pp span {
  display: block;
  width: 1.2rem;
  height: 0.4rem;
  background: #ff6c4c;
  border-radius: 0 0.18rem 0.18rem 0;
}
.container .top .y .x .wenzi {
  margin-left: 0.2rem;
}
.container .top .y .x h2 {
  font: bold 0.31rem/0.52rem "微软雅黑";
  color: #af40ff;
  padding-top: 0.22rem;
}
.container .top .y .x p {
  font: 0.19rem/0.41rem "微软雅黑";
  color: #ca80ff;
}
.container .top .y .x .pp {
  font: 0.2rem/0.32rem "微软雅黑";
  color: white;
  text-align: center;
}
.container .top .y .x .pp span {
  display: block;
  width: 1.2rem;
  height: 0.4rem;
  background: #d569ff;
  border-radius: 0 0.18rem 0.18rem 0;
}
.floot {
  margin: 0 auto;
  width: 7.1rem;
  background-color: white;
}
.floot .title {
  display: flex;
  justify-content: space-around;
}
.floot .title h3 {
  font: 0.34rem/0.85rem "微软雅黑";
  color: #b6b6b6;
}
.floot .title .select {
  font: 0.34rem/0.85rem "微软雅黑";
  color: #ff6040;
}
.floot .tu {
  display: flex;
  justify-content: space-around;
}
.floot .tu a {
  text-align: center;
}
.floot .tu a img {
  width: 1.6rem;
}
.floot .tu a p {
  margin-top: 0.11rem;
  font: 0.25rem "微软雅黑";
  color: #b5b5b5;
}

.recommend1 {
  width: 100%;
}
.recommend1-topnav {
  width: 100%;
}
.recommend1-topnav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.recommend1-topnav ul li {
  width: 2rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  margin: 0.2rem;
  border-radius: 0.1rem;
  color: orange;
  font-size: 0.35rem;
}
.recommend1-topnav ul .active {
  background: orange;
  color: white;
}
.recommend1-bottom {
  margin: 0.2rem;
  /* width: 3.3rem; */
  /* height: 5rem; */
  /* border: 0.01rem solid #cccccc; */
}
.r-Bbox {
  display: flex;
  box-shadow: darkgrey 0px 5px 5px 0px;
  height: 2.5rem;
}
.r-Bbox img {
  margin: 0.2rem;
  width: 1.6rem;
  height: 1.8rem;
}
.bbox-text {
  margin: 0.3rem;
  display: flex;
  flex-direction: column;
  font-size: 0.25rem;
}
.bbox-text span {
  margin: 0.2rem 0;
}
.bbox-text span:nth-child(2) {
  margin-bottom: 0;
  color: red;
}
.bbox-text span:nth-child(3) {
  color: #cccccc;
  text-decoration: line-through;
}
.bbox-text button {
  width: 1.4rem;
  height: 0.5rem;
  background: orange;
  color: #ffffff;
  border-radius: 0.05rem;
  border: none;
}
</style>